<!-- 展示样式 -->
<template>
  <div>
    <article v-if="module == 'list'" class="hover-up-2 transition-normal wow fadeInUp animated">
      <div class="row mb-40 list-style-2">
        <div class="col-md-4">
          <div class="post-thumb position-relative border-radius-5">
            <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
            <div class="img-hover-slide border-radius-5 position-relative"
              :style="{ backgroundImage: 'url(' + data.background + ')' }">
              <!-- <span v-if="data.status != -1" :class="'top-left-icon'+' '+icons[data.status].c"><i
                  :class="'fa'+' '+ icons[data.status].i"></i></span> -->
            </div>
            </a>  
            <ul class="social-share">
              <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
              <li><a class="fb" href="javascript:void(0)" title="暂时不可用" target="_blank"><svg class="Zi Zi--WeChat Login-socialIcon"
                    fill="#fff" viewBox="0 0 24 24" width="20" height="20">
                    <path
                      d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                      fill-rule="evenodd"></path>
                  </svg></a></li>
              <li><a class="tw" href="javascript:void(0)" target="_blank" title="分享到QQ"><svg class="Zi Zi--QQ Login-socialIcon"
                    fill="#fff" viewBox="0 0 24 24" width="20" height="20">
                    <path
                      d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                      fill-rule="evenodd"></path>
                  </svg></a></li>
              <li><a class="pt" href="javascript:void(0)" target="_blank" title="暂时不可用"><i
                    class="elegant-icon social_pinterest"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-8 align-self-center">
          <div class="post-content row">
            <div class="col-12">
              <div style="float:left;" class="entry-meta meta-0 font-small mb-10">
                <a href="javascript:void(0)" @click="$commons.toSearch(tagFormat(item))" v-for="(item,i) in data.tag.split('-')" :key="i" v-if="item!=''">
                  <span :class="'post-cat'+' '+ txtc[i%txtc.length]">{{tagFormat(item)}}</span>
                </a>
              </div>
            </div>

            <div class="col-12">
              <h5 style="float:left;" class="post-title font-weight-900 mb-20 ">
                <span class="text-danger" v-if="data.status == 'TOP'">[顶置]</span>
                <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
                  {{overflowHidForText(data.title,25)}}
                </a>
                <!-- <span class="post-format-icon" v-if="data.star"><i class="elegant-icon icon_star_alt"></i></span> -->
              </h5>
            </div>
            <div class="col-12">
              <div style="float:left;" class="entry-meta meta-1 float-left font-x-small text-uppercase">
                <p class="post-on">{{data.slogan}}</p>
              </div>
            </div>
            <div class="col-12">
              <div style="float:left;" class="entry-meta meta-1 float-left font-x-small text-uppercase">
                <span class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
                <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </article>

    <article v-if="module == 'card'" class=" mb-30 wow fadeInUp animated" data-wow-delay="0.2s">
      <div class="post-card-1 border-radius-10 hover-up">
        <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
        <div class="post-thumb thumb-overlay img-hover-slide position-relative"
          :style="{ backgroundImage: 'url(' + data.background + ')' }">
          <!-- <span v-if="data.status != -1" :class="'top-left-icon'+' '+icons[data.status].c"><i
              :class="'fa'+' '+ icons[data.status].i"></i></span> -->
          <ul class="social-share">
            <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
            <li><a class="fb" href="javascript:void(0)" title="暂时不可用" target="_blank"><svg class="Zi Zi--WeChat Login-socialIcon"
                  fill="#fff" viewBox="0 0 24 24" width="20" height="20">
                  <path
                    d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                    fill-rule="evenodd"></path>
                </svg></a></li>
            <li><a class="tw" href="#" target="_blank" title="分享到QQ"><svg class="Zi Zi--QQ Login-socialIcon" fill="#fff"
                  viewBox="0 0 24 24" width="20" height="20">
                  <path
                    d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                    fill-rule="evenodd"></path>
                </svg></a></li>
            <li><a class="pt" href="javascript:void(0)" target="_blank" title="暂时不可用"><i class="elegant-icon social_pinterest"></i></a>
            </li>
          </ul>
        </div>
        </a>
        <div class="post-content p-30">
          <div class="entry-meta meta-0 font-small mb-10">
            <a href="javascript:void(0)" @click="$commons.toSearch(tagFormat(item))" v-for="(item,i) in data.tag.split('-')" :key="i" v-if="item!=''">
              <span :class="'post-cat'+' '+ txtc[i%txtc.length]">{{tagFormat(item)}}</span>
            </a>
          </div>
          <div class="d-flex post-card-content">
            <h5 class="post-title mb-20 font-weight-900 mt-10">
              <span style="float:left;" class="text-danger" v-if="data.status == 'TOP'">[顶置]</span>
              <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
                {{overflowHidForText(data.title,18)}}
              </a>
              <!-- <span style="float:left;" class="post-format-icon ml-5" v-if="data.star"><i
                  class="elegant-icon icon_star_alt"></i></span> -->
            </h5>
            <div class="post-excerpt mb-25 font-small text-muted" v-if="slogan">
              <p style="text-align:left;">{{overflowHidForText(data.slogan,100)}}</p>
            </div>
            <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
              <span style="float:left;" class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
              <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
            </div>
          </div>
        </div>
      </div>
    </article>
    <div v-if="module == 'window'"
      class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">

      <div class="slide-fade">
        <div class="position-relative post-thumb">
          <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
          <div class="thumb-overlay img-hover-slide position-relative"
            :style="{ backgroundImage: 'url(' + data.background + ')' }">
            
            
            <!-- <span v-if="data.status != -1" :class="'top-left-icon'+' '+icons[data.status].c"><i
                :class="'fa'+' '+ icons[data.status].i"></i></span> -->
            <div class="post-content-overlay text-white ml-30 mr-30 pb-30">
              <div class="entry-meta meta-0 font-small mb-20">
                <a href="javascript:void(0)" @click="$commons.toSearch(tagFormat(item))" v-for="(item,i) in data.tag.split('-')" :key="i" v-if="item!=''">
                  <span :class="'post-cat'+' '+ txtc[i%txtc.length]">{{tagFormat(item)}}</span>
                </a>
              </div>
              <h3 class="post-title font-weight-900 mb-20">
                <a href="javascript:void(0)" style="white-space:nowrap;">
                  {{overflowHidForText(data.title,20)}}
                </a>

              </h3>
              <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">
                <span class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
                <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
              </div>
            </div>
          </div>
          </a>
        </div>
      </div>
    </div>

    <article v-if="module == 'mini'">
      <div class="d-flex hover-up-2 transition-normal">
        <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
          <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
            <img :src="data.background">
          </a>
        </div>
        <div class="post-content media-body row">
          <div class="col-12">
            <h6 class="post-title mb-15 text-limit-2-row font-medium mt-10" style="text-align:left;">
              <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" class="img-link" style="white-space:nowrap;">
                {{overflowHidForText(data.title,10)}}
              </a>
            </h6>
          </div>
          <div class="entry-meta meta-1 float-left font-x-small text-uppercase col-12">
            <div style="float:left;">
              <span class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
              <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
            </div>
          </div>
        </div>
      </div>
    </article>

    <article v-if="module == 'like'" class="mb-30 wow fadeInUp animated">
      <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
        <div class="post-content media-body">
          <h6 class="post-title mb-15 text-limit-2-row font-medium">
            <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)"  style="white-space:nowrap;">
            {{overflowHidForText(data.title,10)}}
          </a>
            </h6>
            <h6 class="post-title mb-15 text-limit-2-row font-medium">
            {{data.slogan}}

            </h6>
          <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
            <span class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
            <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
          </div>
        </div>
        <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
          <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)"  style="white-space:nowrap;">
            <img :src="data.background" alt="">
          </a>


        </div>
      </div>
    </article>

    <div v-if="module=='tag'" class="d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5 mb-30">
      <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
        <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
          <img :src="data.background" alt="">
        </a>
      </div>
      <div class="post-content media-body">
        <h6>
          <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
            {{overflowHidForText(data.title,10)}}
          </a>
        </h6>
        <p class="text-muted font-small">{{data.slogan}}</p>
      </div>
    </div>

  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      data:{
        type: Object,
        default: ()=> ({
          title:'默认标题',
          slogan:'默认简介',
          id:-1,
          background:'123456789',

        })
      },
      module:{
        type:String,
        default:''
      },
      slogan:{
        type:Boolean,
        default:true
      },
      tag:{
        type:Array,
        default:[]
      }
    },
    data() {
      //这里存放数据
      return {
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        icons: [{
          c: 'bg-info',
          i: 'fa-video-camera'
        }, {
          c: 'bg-danger',
          i: 'fa-photo'
        }, {
          c: 'bg-success',
          i: 'fa-music'
        }],
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      overflowHidForText(val, max = 42) {
        let textLength = val.length;
        let resultText = '';
        if (textLength > max) {
          resultText = val.slice(0, max) + '...'
        } else {
          resultText = val
        }
        return resultText
      },
      tagFormat(tag) {
        for (const t of this.tag) {
          if (t.id == tag) {
            return t.name;
          }
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
